import { Component, OnInit,Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'el-progress',
  templateUrl: './progress.component.html'
})
export class ProgressComponent implements OnInit {
    private sanitizer:any;
    @Input() percentage: number=0;
    @Input() type: string='line';
    @Input() status: string='';
    @Input('stroke-width') strokeWidth: number=6;
    @Input('text-inside') textInside: boolean=false;
    @Input('show-text') showText: boolean=true;
    @Input() width: number=126;
    @Input('active-color') activeColor: string='';
    @Input('relative-stroke-width') relativeStrokeWidth: string='';
    constructor(sanitizer: DomSanitizer){
      this.sanitizer = sanitizer;
    };

  ngOnInit(): void {
    this.percentage > 100 && (this.percentage = 100);
        this.relativeStrokeWidth = (this.strokeWidth / this.width * 100).toFixed(1);
  }

  progressTextSize(){
    return this.type === 'line' ? 12 + this.strokeWidth * 0.4
            : this.width * 0.111111 + 2;
  }

  makeIconClass(){
    if (this.type === 'line') {
      return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-cross';
  }
  return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
  }

  makeStroke(){
    if (this.status === 'success')
            return '#13ce66';
        if (this.status === 'exception')
            return '#ff4949';
        return '#20a0ff';
  }

  makeTrackPath(){
    var /** @type {?} */ radius = ~~(50 - Number.parseFloat(this.relativeStrokeWidth) / 2);
        return "M 50 50 m 0 -" + radius + " a " + radius + " " + radius + " 0 1 1 0 " + radius * 2 + " a " + radius + " " + radius + " 0 1 1 0 -" + radius * 2;
   
  }

  svgStyles(){
    var /** @type {?} */ perimeter = (50 - parseFloat(this.relativeStrokeWidth) / 2) * 2 * Math.PI;
    var /** @type {?} */ styles = "stroke-dasharray: " + perimeter + "px, " + perimeter + "px;";
    styles += "stroke-dashoffset: " + (1 - this.percentage / 100) * perimeter + "px;";
    styles += 'transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease';
    return this.sanitizer.bypassSecurityTrustStyle(styles);
  }

  colorStryles(){
    var /** @type {?} */ styles = "width: " + this.percentage + "%;" +
            (this.activeColor ? "background-color: " + this.activeColor + ";" : '');
        return this.sanitizer.bypassSecurityTrustStyle(styles);
  }
}
